<template>
  <div>
    <el-input
      placeholder="请输入内容"
      prefix-icon="el-icon-search"
      clearable
      v-model="searchData"
      @focus="getHotSearch"
      @blur="isShowPopover = false"
      v-on:keyup.enter.native="doSearch"
      >
    </el-input>
    <!-- 弹出层,先写这里看看 -->
    <transition name="el-fade-in">
      <!-- 加个动画让弹出框慢点消失才能点到热搜项 -->
      <div class="suggest-popover"  v-show="isShowPopover">
        <div class="font-bold mgt-10">热搜榜</div>
        <div v-for="(item, index) in hotSearch" :key="index" @click="clickHotItem(item.first)" class="suggest-item pointer mgt-10">
          <span :class="{ red: index < 3 }" class="mgl-10">{{ index + 1 }}</span> <span class="mgl-10">{{ item.first }}</span>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
// , SearchThings
import { getHotSearch } from '@/api/search.js'
export default {
  data () {
    return {
      searchData: '',
      isShowPopover: false,
      hotSearch: []
    }
  },
  methods: {
    async getHotSearch () {
      const res = await getHotSearch()
      if (res.data.code !== 200) return
      this.isShowPopover = true
      this.hotSearch = res.data.result.hots
    },
    clickHotItem (data) {
      if (data === '') return
      this.searchData = data
      this.doSearch()
    },
    // 进行搜索,应该是跳转到搜索结果
    async doSearch () {
      if (this.searchData === '') return
      // 不是当前路径,才继续跳转,防止一直跳转到自己
      if (this.$route.path !== ('/search/' + this.searchData)) {
        this.$router.push('/search/' + this.searchData)
      }
    }
  },
  computed: {
  }
}
</script>

<style lang="less" scoped>
.suggest-popover {
  position: absolute;
  top: 55px;
  width: 300px;
  height: auto;
  color: #000;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 5px rgb(224, 219, 219);
  border-radius: 8px;
  z-index: 99;
}
.suggest-item {
  color: black;
  text-align: left;
  &:last-child {
    margin-bottom: 10px;
  }
}
.red {
  color: #e13e3e;
}
</style>
